<template>
	<!-- height:calc(100vh - 60px); -->
	<view v-if="aiList[0]" class="mjy-index" style="transition: width 2s;border-right:1px solid #E9ECEF">
		<el-tabs v-model="activeName" style="" type="card" @tab-click="handleClick">
			<el-tab-pane label="绘图" name="imagine">
				<imagine :mjyInfo="mjyInfo" :type="'imagine'" :aicurrent="aicurrent"
					style="width: 100%;borber-right:1px solid #f2f2f2" @imagine="mjy" @focus="$emit('focus')">
				</imagine>
			</el-tab-pane>
			<!-- <el-tab-pane label="flux" name="flux">
				<flux :type="'flux'" :aicurrent="aicurrent" style="width: 100%;borber-right:1px solid #f2f2f2">
				</flux>
			</el-tab-pane> -->
			<!-- <el-tab-pane label="MidJourney" name="midJourney">
				<el-tabs type="border-card">
					<el-tab-pane>
						<span slot="label"><i class="el-icon-date"></i>绘画</span>
						<midJourney :aicurrent="aicurrent" style="width: 100%;borber-right:1px solid #f2f2f2">
						</midJourney>
					</el-tab-pane>
					<el-tab-pane label="换脸">
						<face :aicurrent="aicurrent" style="width: 100%;borber-right:1px solid #f2f2f2"></face>
					</el-tab-pane>
					<el-tab-pane label="混图">角色管理</el-tab-pane>
				</el-tabs>
			</el-tab-pane> -->
		</el-tabs>
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>

<script>
	// 引入
	import imagine from './imagine';
	// import delle3 from './delle3';
	// import flux from './flux';
	import tabbars from '@/components/tabbar/tabbar';
	import {
		task,
		index,
		taskId,
		getScroll,
		scroll,
	} from '@/common/api.js';
	import config from '@/common/config'
	export default {
		components: {
			// 注册组件
			imagine,
			// flux
		},
		props: {
			minWidth: {
				type: [Number, String],
				default: 1
			},
			aside: {
				type: Boolean,
				default: false
			},
			deepColor: {
				type: String,
				default: '#4D4D4D'
			},
			shallowColor: {
				type: String,
				default: '#808080'
			},
			lightColor: {
				type: String,
				default: '#ccc'
			},
			aicurrent: {
				type: Number,
				default: 0
			},
			type: {
				type: String,
				default: 'delle3'
			},
			mjyInfo: Object
		},
		data() {
			return {
				fill: config.fill,
				tabbarsValue: 'painting',
				scrollTop: 0,
				isFirstLoad: true, // 标志变量，用于判断是否首次加载
				value: '',
				id: '',
				data: [],
				createdAt: '',
				radiosval: 0,
				textarea: "",
				painting: {},
				dataLoaded: false,
				activeName: 'imagine',
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		watch: {
			// 监听data数据的变化
			// painting: {
			// 	handler: function(newVal, oldVal) {
			// 		this.$uv.vuex('config_' + this.tabbarsValue, newVal);
			// 	},
			// 	deep: true
			// },
			aicurrent: {
				handler: function(newVal, oldVal) {

				},
				deep: true
			},
		},
		mounted() {
			// aiList[aicurrent].value
			this.$emit('custom-event', this.activeName);
		},
		methods: {
			mjy(e) {
				this.$emit('mjy', e);
			},
			handleClick(tab, event) {
				this.$emit('custom-event', this.activeName);
			},
			submit() {
				console.log(this.painting);
			},
			clicklist(ite, i) {
				this.radiosval = i;
				this.painting['model'] = ite.value;
				this.$uv.vuex('config_' + this.tabbarsValue, this.painting);
			},
			async getVuex() {
				getScroll({
					custom: {
						auth: true,
						toast: false,
					},
					params: {
						type: this.tabbarsValue,
					}
				}).then(data => {
					if (data && data.content) {
						this.$uv.vuex('vuex_' + this.tabbarsValue, data.content);
					}
				})
			},
			async record() {
				await scroll({
					content: this['vuex_' + this.tabbarsValue],
					type: this.tabbarsValue
				}, {
					custom: {
						auth: true,
						toast: false,
					},
				})
			},
			cTime(time1, data, index) {
				if (index == 0) {
					return true;
				}
				// console.log(" ” " + Number(data.length - 1));
				if (index == Number(data.length - 1)) {
					return false;
				}
				var time2 = data[index + 1] && data[index + 1].createdAt;
				if (!time1 || !time2) {
					return false;
				}
				// console.log(time1 + " 《=》 " + time2);
				// 将时间转换为Date对象
				var date1 = new Date(time1).getTime();
				var date2 = new Date(time2).getTime();
				// 计算时间差（毫秒）
				var difference = Math.abs(date2 - date1);
				// 将时间差转换为分钟
				var minutes = Math.ceil(difference / (1000 * 60)); // 向上取整
				if (minutes > 20) {
					return true;
				} else {
					return false;
				}
			},
			times(time) {
				return " -- " + uni.$uv.timeFrom(new Date(time).getTime()) + " -- ";
			},
			routes(url) {
				this.routed('/pages' + url);
			},
			routed(url) {
				console.log('routed', url)
				uni.$uv.route({
					url: url,
					intercept(params, next) {
						console.log(params, next)
						uni.showLoading({
							title: '等待中...'
						})
						// 模拟处理等待
						setTimeout(() => {
							uni.hideLoading();
							next(true);
						}, 1000)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "@/uni_modules/uv-ui-tools/index.scss";

	.mjy-index {
		background-color: #eeeeee;
		height: 100%;
		overflow: auto;
	}

	::v-deep .el-tabs__nav-scroll {
		z-index: 0;
	}

	>>>.el-tabs__nav-scroll {
		z-index: 0;
	}

	/* 测试 */
	.view_circle0 {
		display: flex;
		justify-content: space-between;

		margin: 50upx;
		width: 200upx;
		height: 200upx;
		border-radius: 50%;
		/* inset 表示内阴影 */
		/* box-shadow: 0 3px 150upx #62d0d6 inset; */
		box-shadow: -10px 0px 50upx #7ce2c0,
			/*左边阴影*/
			0px -10px 50upx #65dee2,
			/*上边阴影*/
			10px 0px 50upx #f7dc77,
			/*右边阴影*/
			0px 10px 50upx #c84848;
		animation: turn 1s linear infinite;
	}

	/* 
		      turn : 定义的动画名称
		      1s : 动画时间
		      linear : 动画以何种运行轨迹完成一个周期
		      infinite :规定动画应该无限次播放
		     */
	@keyframes turn {
		0% {
			-webkit-transform: rotate(0deg);
		}

		25% {
			-webkit-transform: rotate(90deg);
		}

		50% {
			-webkit-transform: rotate(180deg);
		}

		75% {
			-webkit-transform: rotate(270deg);
		}

		100% {
			-webkit-transform: rotate(360deg);
		}
	}
</style>